<template>
  <div class="w">
    <div class="title">Your Trip Starts Here</div>

    <div class="search">
      <a-form
        :model="formState"
        name="horizontal_login"
        layout="inline"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item name="username">
          <div style="width: 160px">
            <a-select
              v-model:value="value1"
              mode="tags"
              placeholder="Please Select"
              :options="options1"
            ></a-select>
          </div>
        </a-form-item>

        <a-form-item name="password">
          <a-range-picker showToday showNow v-model:value="value2" />
        </a-form-item>

        <a-form-item name="password">
          <div style="width: 185px">
            <a-select
              v-model:value="value"
              mode="tags"
              placeholder="Please Select"
              :options="options"
            ></a-select>
          </div>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">Search</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="box-1">
      <div class="top mb-2">
        <div class="tit">Featured Properties</div>
        <div class="info">
          <div class="item">
            <img src="../assets/img/1.png" alt="" class="icon" /><span class="txt">
              We Price Match</span
            >
          </div>

          <div class="item">
            <img src="../assets/img/2.png" alt="" class="icon" /><span class="txt">
              Hotel Booking Guarantee</span
            >
          </div>

          <div class="item">
            <img src="../assets/img/3.png" alt="" class="icon" /><span class="txt">
              Hotel Stay Guarantee</span
            >
          </div>
        </div>
      </div>

      <div class="btns d-flex mb-2">
        <div
          @click="handleBtnclick1(it)"
          class="btn"
          :class="it.class == 'active' ? 'active' : ''"
          v-for="(it, i) in btnList1"
          :key="i"
        >
          {{ it.label }}
        </div>
      </div>

      <div class="list_body">
        <div class="list" v-if="btn1NowId == 1">
          <div class="item" v-for="item in 3" :key="item">
            <div class="img">
              <img src="..\assets\img\home\Atlanta1.jpg" />
            </div>
            <div class="content">
              <div>
                <span class="content_tit"
                  >Hilton Atlanta
                  <el-icon v-for="item in 3" :key="item" :size="18">
                    <StarFilled />
                  </el-icon>
                </span>
                <p><span>4.2/5</span> 133 reviews</p>
                <div class="accessories">Free Cancellation</div>
              </div>
              <div>
                <div class="footer">
                  <span class="form">From</span><span class="money">$205</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item_go">
            <div class="img">
              <img src="../assets/img/roomType/jzTwoCHours.jpg" />
            </div>
            <div class="content">
              <p>Discover great deals on hotels around the world</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
        <div class="list" v-else-if="btn1NowId == 2">
          <div class="item" v-for="item in 2" :key="item">
            <div class="img">
              <img src="..\assets\img\home\Atlanta2.jpg" />
            </div>
            <div class="content">
              <div>
                <span class="content_tit"
                  >Hilton Orlando
                  <el-icon v-for="item in 3" :key="item" :size="18">
                    <StarFilled />
                  </el-icon>
                </span>
                <p><span>4.2/5</span> 133 reviews</p>
                <div class="accessories">Free Cancellation</div>
              </div>
              <div>
                <div class="footer">
                  <span class="form">From</span><span class="money">$239</span>
                </div>
              </div>
            </div>
          </div>

          <div class="item_go">
            <div class="img">
              <img src="../assets/img/roomType/jzTwoCHours.jpg" />
            </div>
            <div class="content">
              <p>Discover great deals on hotels around the world</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
        <div class="list" v-else-if="btn1NowId == 3">
          <div class="item" v-for="item in 1" :key="item">
            <div class="img">
              <img src="..\assets\img\home\Atlanta3.jpg" />
            </div>
            <div class="content">
              <div>
                <span class="content_tit"
                  >Hilton Miami Beach
                  <el-icon v-for="item in 3" :key="item" :size="18">
                    <StarFilled />
                  </el-icon>
                </span>
                <p><span>4.2/5</span> 133 reviews</p>
                <div class="accessories">Free Cancellation</div>
              </div>
              <div>
                <div class="footer">
                  <span class="form">From</span><span class="money">$125</span>
                </div>
              </div>
            </div>
          </div>

          <div class="item_go">
            <div class="img">
              <img src="../assets/img/roomType/jzTwoCHours.jpg" />
            </div>
            <div class="content">
              <p>Discover great deals on hotels around the world</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- #2################################################################################## -->
    <div class="box-1 box-2">
      <div class="top mb-2">
        <div class="tit">Popular Attractions</div>
      </div>
      <div class="btns d-flex mb-2">
        <div
          @click="handleBtnclick2(it)"
          class="btn"
          :class="it.class == 'active' ? 'active' : ''"
          v-for="(it, i) in btnList2"
          :key="i"
        >
          {{ it.label }}
        </div>
      </div>
      <div class="list_body">
        <div class="list" v-if="btn2NowId == 1">
          <div class="item item_two" v-for="item in 3" :key="item">
            <div class="img">
              <img src="../assets/img/back1.png" />
            </div>
            <div class="content">
              <div>
                <span class="content_tit"
                  >Hilton Bangkok
                  <el-icon v-for="item in 3" :key="item" :size="18">
                    <StarFilled />
                  </el-icon>
                </span>
                <p><span>4.2/5</span> 133 reviews</p>
                <div class="accessories">Free Cancellation</div>
              </div>
            </div>
          </div>

          <div class="item_go item_go_two">
            <div class="img">
              <img src="../assets/img/roomType/shangwuOne.jpg" />
            </div>
            <div class="content">
              <p>Explore more popular destinations</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
        <div class="list" v-else-if="btn2NowId == 2">
          <div class="item item_two" v-for="item in 2" :key="item">
            <div class="img">
              <img src="..\assets\img\home\To.jpg" />
            </div>
            <div class="content">
              <div>
                <span class="content_tit"
                  >Hilton Tokyo
                  <el-icon v-for="item in 3" :key="item" :size="18">
                    <StarFilled />
                  </el-icon>
                </span>
                <p><span>4.2/5</span> 133 reviews</p>
                <div class="accessories">Free Cancellation</div>
              </div>
            </div>
          </div>

          <div class="item_go item_go_two">
            <div class="img">
              <img src="../assets/img/roomType/shangwuOne.jpg" />
            </div>
            <div class="content">
              <p>Explore more popular destinations</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
        <div class="list" v-else-if="btn2NowId == 3">
          <div class="item item_two" v-for="item in 1" :key="item">
            <div class="img">
              <img src="..\assets\img\home\ma.jpg" />
            </div>
            <div class="content">
              <div>
                <span class="content_tit"
                  >Hilton Manila
                  <el-icon v-for="item in 3" :key="item" :size="18">
                    <StarFilled />
                  </el-icon>
                </span>
                <p><span>4.2/5</span> 133 reviews</p>
                <div class="accessories">Free Cancellation</div>
              </div>
            </div>
          </div>

          <div class="item_go item_go_two">
            <div class="img">
              <img src="../assets/img/roomType/shangwuOne.jpg" />
            </div>
            <div class="content">
              <p>Explore more popular destinations</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- #3################################################################################# -->
    <div class="box-1 box-3">
      <div class="top mb-2">
        <div class="tit">Deals on Popular Routes</div>
        <div class="info">
          <div class="item">
            <img src="../assets/img/1.png" alt="" class="icon" /><span class="txt">
              Flexible Booking</span
            >
          </div>
          <div class="item">
            <img src="../assets/img/4.png" alt="" class="icon" /><span class="txt">
              Price Alerts</span
            >
          </div>
          <div class="item">
            <img src="../assets/img/2.png" alt="" class="icon" /><span class="txt">
              Flight Booking Guarantee</span
            >
          </div>
        </div>
      </div>
      <div class="btns d-flex mb-2">
        <div
          @click="handleBtnclick3(it)"
          class="btn"
          :class="it.class == 'active' ? 'active' : ''"
          v-for="(it, i) in btnList3"
          :key="i"
        >
          {{ it.label }}
        </div>
      </div>

      <div class="list_body">
        <div class="list" v-if="btn3NowId == 1">
          <div class="item item_three" v-for="item in 3" :key="item">
            <div class="img">
              <img src="..\assets\img\home\lo.jpg" />
            </div>
            <div class="content">
              <img class="icon" src="../assets/img/cm.png" />
              <div>
                <span class="content_tit">Los Angeles </span>
                <div class="date"><span>Tue, Jun 25</span>-<span>Mon, Jul 1</span></div>
              </div>
              <div>
                <div class="footer">
                  <span class="form">From</span><span class="money">$1700</span>
                </div>
              </div>
            </div>
          </div>

          <div class="item_go item_go_two">
            <div class="img">
              <img src="..\assets\img\home\Orlando1.jpg" />
            </div>
            <div class="content">
              <p>Explore more popular destinations</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
        <div class="list" v-else-if="btn3NowId == 2">
          <div class="item item_three" v-for="item in 1" :key="item">
            <div class="img">
              <img src="..\assets\img\home\mam.jpg" />
            </div>
            <div class="content">
              <img class="icon" src="../assets/img/cm.png" />
              <div>
                <span class="content_tit">Miami</span>
                <div class="date"><span>Tue, Jun 25</span>-<span>Mon, Jul 1</span></div>
              </div>
              <div>
                <div class="footer">
                  <span class="form">From</span><span class="money">$1500</span>
                </div>
              </div>
            </div>
          </div>

          <div class="item_go item_go_two">
            <div class="img">
              <img src="..\assets\img\home\Orlando1.jpg" />
            </div>
            <div class="content">
              <p>Explore more popular destinations</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
        <div class="list" v-else-if="btn3NowId == 3">
          <div class="item item_three" v-for="item in 2" :key="item">
            <div class="img">
              <img src="..\assets\img\home\nw.jpg" />
            </div>
            <div class="content">
              <img class="icon" src="../assets/img/cm.png" />
              <div>
                <span class="content_tit">New York</span>
                <div class="date"><span>Tue, Jun 25</span>-<span>Mon, Jul 1</span></div>
              </div>
              <div>
                <div class="footer">
                  <span class="form">From</span><span class="money">$2000</span>
                </div>
              </div>
            </div>
          </div>

          <div class="item_go item_go_two">
            <div class="img">
              <img src="..\assets\img\home\Orlando1.jpg" />
            </div>
            <div class="content">
              <p>Explore more popular destinations</p>
              <el-button type="primary">Go Now</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer_box">
      <h1>Top attractions reviews</h1>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="main">
            <div class="left">
              <div class="img">
                <img src="..\assets\img\home\Shanghai.jpg" />
              </div>
              <p class="location"><span>China, Shanghai</span> <span>$5,4k</span></p>
              <p>
                <el-icon>
                  <Promotion /> </el-icon
                >10 Days Trip
              </p>
            </div>
            <div class="right">
              <div class="top">
                <el-avatar
                  size="large"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <div>
                  <span class="name">Leo</span><br />
                  <span class="signature">Travel can make people relaxed</span>
                </div>
              </div>
              <p class="contant">
                Shanghai, Oriental Pearl, unique style, high-rise, traditional and modern fusion, food street, bright lights, night Huangpu River, neon flashing, enjoy a swim.
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="main">
            <div class="left">
              <div class="img">
                <img src="..\assets\img\home\OIP.jpg" />
              </div>
              <p class="location"><span>England, Bristol</span> <span>$6,4k</span></p>
              <p>
                <el-icon>
                  <Promotion /> </el-icon
                >10 Days Trip
              </p>
            </div>
            <div class="right">
              <div class="top">
                <el-avatar
                  size="large"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <div>
                  <span class="name">David Peters</span><br />
                  <span class="signature">I love traveling.</span>
                </div>
              </div>
              <p class="contant">
                Bristol, a city in southwest England, has a long history, warm old streets, multicultural, artistic atmosphere, technological innovation center, style cafes, charming riverbanks, quiet parks, pleasant climate, explore nature and urban charm.
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script setup>

// import { ConsoleSqlOutlined } from '@ant-design/icons-vue'
import { computed, reactive, ref } from 'vue';


const value2 = ref()
const formState = reactive({
  username: '',
  password: '',
})

const handleChange = value => {
  console.log(`selected ${value}`)
}

const btn1NowId = ref(1)
const btn2NowId = ref(1)
const btn3NowId = ref(1)

const btnList1 = ref([
  {
    id: 1,
    label: 'Atlanta',
    class: 'active'
  },
  {
    id: 2,
    label: 'Orlando',
    class: ''
  },
  {
    id: 3,
    label: 'Miami Beach',
    class: ''
  },

])
const btnList2 = ref([
  {
    id: 1,
    label: 'Bangkok',
    class: 'active'
  },
  {
    id: 2,
    label: 'Tokyo',
    class: ''
  },
  {
    id: 3,
    label: 'Manila',
    class: ''
  },
  
])
const btnList3 = ref([
  {
    id: 1,
    label: 'Los Angeles',
    class: 'active'
  },
  {
    id: 2,
    label: 'Miami',
    class: ''
  },
  {
    id: 3,
    label: 'New York',
    class: ''
  },

])
const value = ref([])
const options = [...Array(25)].map((_, i) => ({
  value: (i + 1),
}))
const value1 = ref([])
const options1 = ["Hong Kong", "Kuala Lumpur", "Singapore"].map((_, i) => ({
  value: _
}))
const onFinish = values => {
  console.log('Success:', values)
}
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo)
}
const disabled = computed(() => {
  return !(formState.username && formState.password)
})

const valuex = ref([])
const handleBtnclick1 = item => {

  btnList1.value.forEach(row => {
    if (row.id == item.id) {
      row.class = "active"
      btn1NowId.value = item.id
    } else {
      row.class = ""
    }
  })
}

const handleBtnclick2 = item => {

  btnList2.value.forEach(row => {
    if (row.id == item.id) {
      row.class = "active"
      btn2NowId.value = item.id
    } else {
      row.class = ""
    }
  })
}
const handleBtnclick3 = item => {

  btnList3.value.forEach(row => {
    if (row.id == item.id) {
      btn3NowId.value = item.id
      row.class = "active"
    } else {
      row.class = ""
    }
  })
}

</script>

<style scoped lang="less">
.d-flex {
  display: flex;
}

.jc-center {
  justify-content: center;
}

.jc-around {
  justify-content: space-around;
}

.ai-center {
  align-items: center;
}

.w {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}

.bottom {
  margin: 20px 20px;
  padding: 20px 20px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact {
  margin-top: 20px;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    #b8cbb8 0%,
    #b8cbb8 0%,
    #b465da 0%,
    #cf6cc9 33%,
    #ee609c 66%,
    #ee609c 100%
  );
}

.title {
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.tag {
  width: 550px;
  margin: 0 auto;
  background-color: rgb(8, 189, 235);
  padding: 5px 8px;
  border-radius: 15px;
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  font-weight: 500;
}

.title-item {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}



.search {
  width: 800px;
  margin: 0 auto;
  padding: 25px 10px;
  background: linear-gradient(70deg, #fbc2eb 0%, #a6c1ee 100%);
  border-radius: 10px;
}

.box {
  margin-top: 20px;
  border-radius: 10px;
  background: linear-gradient(70deg, #a6c1ee 0%, #fbc2eb 100%);
  padding: 20px;
}

.banner {
  display: flex;
  justify-content: space-between;
}

.box1:hover {
  border-radius: 10px;
  cursor: pointer;
  transform: scale(1.1);
}

.city {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px 5px;
}

.img {
  width: 240px;
  height: 250px;
}

.imgs {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.time {
  background-color: #fff;
  padding-bottom: 15px;
  padding-left: 5px;
}

.item1 {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.desc {
  padding-top: 60px;
  width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 20px;

  align-items: center;
}

.mb-2 {
  margin: 15px 0px 15px 20px;
}

.box-1 {
  background-image: linear-gradient(
    45deg,
    rgb(229, 249, 243),
    rgba(246, 253, 254, 0.658),
    rgba(246, 253, 254, 0.658),
    rgb(229, 249, 243)
  );
}

.box-2 {
  background-image: linear-gradient(
    45deg,
    rgb(225, 250, 222),
    rgba(247, 253, 246, 0.64),
    rgba(247, 253, 246, 0.804),
    rgb(229, 251, 226)
  );
}

.box-3 {
  background-image: linear-gradient(
    45deg,
    rgb(251, 235, 254),
    rgba(250, 244, 251, 0.64),
    rgba(249, 240, 248, 0.684),
    rgb(250, 224, 254)
  );
}

.box-4 {
  background-image: linear-gradient(
    45deg,
    rgb(251, 218, 218),
    rgba(251, 238, 238, 0.716),
    rgba(255, 237, 237, 0.711),
    rgb(251, 218, 218)
  );
}

.box-1 {
  margin-top: 20px;
  padding: 15px 0px;
  text-align: left;
  border-radius: 20px;

  .tit {
    margin-bottom: 20px;
    font-weight: 700;
    margin-top: 10px;
    font-size: 20px;
  }

  .info {
    display: flex;

    .item {
      flex: none;
      margin-right: 20px;

      .txt {
        border-bottom: 1px dotted #0f294d;
      }

      .icon {
        width: 30px;
        vertical-align: middle;
        margin-top: -5px;
      }

      cursor: help;
      color: #0f294d;
      font-size: 14px;
      vertical-align: top;
      font-weight: 700;
      background: no-repeat;
    }
  }

  .btns {
    .btn {
      height: 40px;
      border-radius: 10px;
      padding: 10px 15px;
      background: #fff;
      text-align: center;
      color: #0f294d;
      margin: 10px;

      &:hover {
        color: #3264ff;
        cursor: pointer;
      }

      &.active {
        background: #0f294d;
        color: #fff;
      }
    }
  }
}

.list_body {
  width: 100%;

  .list {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;

    .item_go {
      position: relative;
      margin: 0 15px;
      max-width: 270px;
      min-width: 270px;
      height: 350px;
      overflow: hidden;
      box-shadow: 0 0 5px #b8b8b84d;
      border-radius: 10px;

      & > .content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9;
        padding: 10px;
        color: whitesmoke;
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));

        p {
          font-size: 18px;
          font-weight: bold;
          line-height: 24px;
          margin-bottom: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          line-clamp: 3;
          -webkit-line-clamp: 3;
          word-break: break-word;
        }

        .el-button {
          width: 100%;
          font-weight: bold;
        }
      }

      &:hover {
        box-shadow: 0 0 14px #3a3a3a4d;
      }

      .img {
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: auto;
          height: 100%;
          transition: transform 0.3s ease;
        }

        &:hover img {
          transform: scale(1.1);
        }
      }
    }

    .item {
      margin: 0 15px;
      max-width: 270px;
      min-width: 270px;
      height: 350px;
      overflow: hidden;
      box-shadow: 0 0 3px #b8b8b84d;

      &:hover {
        box-shadow: 0 0 10px #6f6f6f4d;
      }

      .img {
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;

        img {
          width: 100%;

          height: auto;
          transition: transform 0.3s ease;
        }

        &:hover img {
          transform: scale(1.1);
        }
      }

      .content {
        box-sizing: border-box;
        height: 200px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .content_tit {
          color: #0f294d;
          font-size: 18px;
          line-height: 18px;
          vertical-align: middle;
          text-overflow: ellipsis;

          .el-icon {
            vertical-align: middle;
            color: rgb(255, 180, 0);
          }
        }

        p {
          margin: 10px 0;
          font-weight: bold;
          color: #00429b;
          line-height: 22px;
          font-size: 14px;
          margin-left: 3px;

          & > span {
            padding: 1px 6px;
            background: #00429b;
            border-radius: 11px 0 11px 11px;
            color: #fff;
            font-size: 16px;
            white-space: nowrap;
          }
        }

        .accessories {
          font-size: 12px;
          line-height: 16px;
          color: #4e4e4e;
        }

        .footer {
          margin-top: 10px;
          text-align: right;
          font-size: 16px;
          vertical-align: middle;

          .form {
            color: #8592a6;
            line-height: 26px;
          }

          .money {
            color: #0f294d;
            font-size: 20px;
            font-weight: bold;
            line-height: 26px;
            margin-left: 3px;
          }
        }
      }

    
    }

    .item_two {
      max-height: 300px;
    }

    .item_go_two {
      max-width: 270px;
      min-width: 270px;
      height: 300px;
    }

    .item_three {
      max-height: 300px;

      .content {
        position: relative;
        padding-left: 44px;
        height: 150px;

        .icon {
          position: absolute;
          width: 20px;
          height: 20px;
          left: 16px;
          top: 16px;
        }

        .date {
          margin-top: 10px;
          font-size: 12px;
          line-height: 16px;
          color: #4e4e4e;
        }
      }
    }
  }
}

.footer_box {
  margin-top: 10px;

  h1 {
    font-weight: bolder;
    font-style: italic;
  }

  .main {
    background-color: #dfdfdf;
    display: flex;
  }

  .right {
    flex: 1;

    padding: 10px;

    .contant {
      margin-top: 20px;
      font-weight: bold;

      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 7;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }

    .top {
      display: flex;

      & > div {
        margin-left: 10px;

        .name {
          font-size: 20px;
          font-weight: bold;
          color: #00429b;
        }

        .signature {
          font-size: 12px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .left {
    flex: 1;
    height: 300px;
    background-color: #ffffff;
    border-radius: 30px;
    overflow: hidden;

    .location {
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
    }

    .img {
      width: 100%;
      height: 200px;
      overflow: hidden;
      position: relative;

      img {
        width: 100%;

        height: auto;
        transition: transform 0.3s ease;
      }

      &:hover img {
        transform: scale(1.1);
      }
    }
  }
}
</style>